<template>
    <section id="join-bar">
        <div class="container clearfix join-tag">
            <h1 class="title mgBtm">成为云竹众包的一员，汇集众智</h1>

            <div class="join-us">
                <p>无论您是企业机构，</p>
                <p>还是希望获得工作的专业人士，</p>
                <p>我们都希望您能更好地融入云竹众包</p>
            </div>

            <a href="javascript:;" id="join-member">
                <i class="join-member-icon"></i>
                <span class="join-member-ct">了解更多会员权利</span>
            </a>

            <div class="join-intro">
                <div class="clearfix">
                    <div class="join-com">
                        <h1>企业会员Pro</h1>
                        <p>加盟云竹成为专职服务团队,我们也将为您提供最好的服务展台</p>
                        <a href="javascript:;" class="join-btn bg-company-pro">了解更多</a>

                        <div class="join-detail bg-company-pro" id="member-pro-h">
                            <p>详细功能描述详细功能描述详细功能描述详细功能描述详细功能描述详细功能描述详细功能描述详细功能描述详细功能描述详细功能描述详细功能描述</p>
                        </div>
                    </div>

                    <div class="join-com">
                        <h1>企业会员</h1>
                        <p>发布需求任务获得专业服务，而您作为更具实力的专业团队，也欢迎您参与解决更多任务</p>
                        <a href="javascript:;" class="join-btn bg-company">免费注册</a>

                        <div class="join-detail bg-company">
                            <p>详细功能描述详细功能描述详细功能描述详细功能描述详细功能描述功能详细功能描述详细功能描述</p>
                        </div>
                    </div>

                    <div class="join-com">
                        <h1>大众会员</h1>
                        <p>希望获得能体现自身技能价值的自由工作者</p>
                        <a href="javascript:;" class="join-btn bg-person">免费注册</a>

                        <div class="join-detail bg-person">
                            <p>详细描述详细功能描述详细功能描述详细功能描述</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
    var jm = document.getElementById("join-member");
    var jmico = document.getElementsByClassName("join-member-icon")[0];
    var jict = document.getElementsByClassName("join-member-ct")[0];
    var jitg = document.getElementsByClassName("join-tag")[0];
    var mbH = document.getElementById("member-pro-h").offsetHeight;
    jm.addEventListener('click', function () {

        if (jict.innerText == "了解更多会员权利") {
            jmico.style.webkitTransform = "rotate(180deg)";
            jict.innerText = "收起详情";
            jitg.style.paddingBottom = mbH + "px";
        } else {
            jmico.style.webkitTransform = "rotate(0deg)";
            jict.innerText = "了解更多会员权利";
            jitg.style.paddingBottom = "0";
        }
    });
</script>